<template>
    <div>
        <!--导航菜单-->
        <el-menu :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 :unique-opened="true"
                 router                
                 @open="handleOpen"
                 @close="handleClose"
                 >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-ico-menu"></i> 导航
            </template>
            <template v-for="(route,index) in routes" >
                <el-menu-item :index="route.path" :key="index">
                <!--<router-link :to="route.path" exact-active-class="active">
                        <icon :icon="route.icon" class="mr-2" /><span>{{ route.display }}</span>
                      </router-link>-->
                
                  <span><icon :icon="route.icon" class="mr-2" /><span>{{ route.display }}</span></span>
                </el-menu-item>
            </template>
            
          </el-submenu>
        </el-menu>      
    </div>
</template>

<script>
    import { routes } from '../router/routes'

    export default {
      data () {
        return {
          routes,
          collapsed: true
        }
      },
      methods: {
        toggleCollapsed: function (event) {
          this.collapsed = !this.collapsed
        },
         handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style scoped>
    .slide-enter-active, .slide-leave-active {
    transition: max-height .35s
    }
    .slide-enter, .slide-leave-to {
    max-height: 0px;
    }

    .slide-enter-to, .slide-leave {
    max-height: 20em;
    }
</style>
